<template>
  <div class="my_div">
    <div>
      <img src="url" alt="" />
      <p :style="{ 'background-color': color }" @click="addBn">{{ uname }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['url', 'uname'],
  methods: {
    addBn() {
      console.log(1)
      this.$emit('goudan', this.uname)
      this.color = `rgb(${Math.round(Math.random() * 255)},${Math.round(
        Math.random() * 255
      )},${Math.round(Math.random() * 255)})`
    },
  },
  data() {
    return {
      color: 'white',
    }
  },
}
</script>

<style scoped>
.my_div {
  width: 200px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.my_div img {
  width: 100%;
  height: 200px;
}
</style>
